<template>
  <div class="miniCardComponents">
    <span class="title">{{ title }}</span>
    <h2>{{ nums }}</h2>
    <span class="gray">{{ precent }}：</span>
    <span
      class="precent"
      :class="{
        redP : precentData > 0,
        greenP: precentData < 0
      }"
    >
      {{ precentData || 0 }}%
    </span>
    <span v-if="precentData > 0" class="triangle up"></span>
    <span v-if="precentData < 0" class="triangle down"></span>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    precent: {
      type: String,
      default: ''
    },
    nums: {
      type: Number,
      default: 0
    },
    precentData: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style lang="scss" scoped>
.miniCardComponents{
  $red: #D04A41;
  $green: #427A0A;
  margin-right: 50px;
  h2{
    margin: 12px 0;
    font-weight: bold;
  }
  .title{
    font-size: 16px;
    font-weight: 700;
  }
  .gray{
    color: #929292;
  }
  .precent{
    margin: 0 8px;
  }
  .redP{
    color: $red;
  }
  .greenP{
    color: $green;
  }
  .triangle{
    width: 0;
    height: 0;
    position: relative;
    border: 8px solid;
  }
  .up{
    position: relative;
    top: -12px;
    border-color: transparent transparent $red transparent;
  }
  .down{
    position: relative;
    top: 12px;
    border-color: $green transparent transparent transparent;
  }
}
</style>
